<template>
  <view class="container">
    <template v-if="list.length > 0">
      <view class="main" v-for="(item,index) in list" :key="index">
        <view class="main_left">
          <image src="/static/my/tongzhixiaoxi.png" mode=""></image>
        </view>
        <view class="main_right">
          <view class="main_right_head">
            <view>{{item.title}}</view>
            <text>{{item.des}}</text>
          </view>
          <view class="main_right_time">
            {{item.time}}
          </view>
        </view>
      </view>
      <uv-load-more status="nomore" line />
    </template>
    <uv-empty style="margin-top: 25%;" v-else></uv-empty>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';
  const list = ref([])
  const data = [
    {
      title: '系统通知',
      des: '系统通知系统通知系统通知系统通知系统通知系统 通知系统通知系统通知系统。',
      time: '2020-09-15',
    }, {
      title: '系统通知',
      des: '系统通知系统通知系统通知系统通知系统通知系统 通知系统通知系统通知系统。',
      time: '2020-09-15',
    }, {
      title: '系统通知',
      des: '系统通知系统通知系统通知系统通知系统通知系统 通知系统通知系统通知系统。',
      time: '2020-09-15',
    }, {
      title: '系统通知',
      des: '系统通知系统通知系统通知系统通知系统通知系统 通知系统通知系统通知系统。',
      time: '2020-09-15',
    }, {
      title: '系统通知',
      des: '系统通知系统通知系统通知系统通知系统通知系统 通知系统通知系统通知系统。',
      time: '2020-09-15',
    }, {
      title: '系统通知',
      des: '系统通知系统通知系统通知系统通知系统通知系统 通知系统通知系统通知系统。',
      time: '2020-09-15',
    },
  ]
  const getList = () => {
    list.value.push(...data)
    uni.stopPullDownRefresh()
  }
  const params = reactive({
    pageIndex: 1,
    pageSize: 10
  })
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })

  onLoad(() => {
    list.value.push(...data)
  })
</script>

<style lang="less" scoped>
  .container {
    padding: 0 55rpx 30rpx;

    .main {
      width: 640rpx;
      height: 225rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid rgba(#000, .1);
      &:last-child {
        border-bottom: 0;
      }
      &_left {
        margin-right: 45rpx;

        image {
          width: 76rpx;
          height: 76rpx;
          background: linear-gradient(135deg, #FE9A00, #FFC200);
          border-radius: 50%;
        }
      }

      &_right {
        flex: 1;

        &_head {
          font-family: Adobe Heiti Std;
          font-size: 24rpx;
          color: #999999;
          margin-bottom: 15rpx;

          view {
            margin-bottom: 15rpx;
            font-weight: normal;
            font-size: 32rpx;
            color: #000000;
          }
        }

        &_time {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
</style>